<template>
	<div class="goods-list-item" @click="itemClick">
		<img :src="goodsItem.show.img" alt="" @load="imageLoad">
		<h5>{{goodsItem.title}}</h5>
		<h6>
			<span>￥{{goodsItem.price}}</span>
			<span>☆ {{goodsItem.cfav}}</span>
		</h6>
	</div>
</template>

<script>
	export default {
		name:'goodsListItem',
		props:{
			goodsItem:Object
		},
		methods:{
			//在图片加载完成后进行该事件的回调，使得scroll的高度动态改变
			imageLoad(){
				if(this.$route.path == '/home'){
					this.$bus.$emit('itemImgLoad');
				}
			},
			itemClick(){
				this.$router.push({
					path:'/detail',
					query:{
						id:this.goodsItem.iid
					}
				})
			}
		}
	}
</script>

<style>
	.goods-list-item {
		display: flex;
		flex-direction: column;
		justify-content: left;
		align-items: center;
		box-sizing: border-box;
		width: 48%;
		height: auto;
		overflow: hidden;
	}
	.goods-list-item  img {
		width: 100%;
		height: auto;
	}
	.goods-list-item h5 {
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		width: 100%;
		font-size: 0.426666rem;
	}
	.goods-list-item h6 span {
		font-size: 0.373333rem;
	}
	.goods-list-item h6 span:first-child{
		padding-right: 0.266666rem;
		color:#ef6300;
	}
</style>
